<template>
  <div>
    <con-title :topTitle="topTitle" />
    <el-card class="box-card">
      <el-form>
        <el-form-item>
          <span>账号标签 </span>
          <el-input placeholder="请输入标签" class="input_w" v-model="ruleForm.tag"></el-input>
        </el-form-item>
        <el-form-item>
          <span>访问权限 </span>
          <el-input placeholder="请输入访问权限" class="input_w" v-model="ruleForm.authority"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- 下拉菜单 -->
          <el-form-item label="在线状态：">
            <el-select v-model="ruleForm.online" placeholder="请选择" class="input-width">
              <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>

        </el-form-item>

        <el-form-item class="btn_left">
          <el-button type="primary" @click="dialogVisible = true">确定</el-button>
          <el-button type="primary">取消</el-button>
        </el-form-item>
        <!-- 弹窗 -->
        <el-dialog title="添加群组信息" :visible.sync="dialogVisible" width="30%">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleOK">确 定</el-button>
          </span>
        </el-dialog>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $secAdd, $secList } from "@/api/index.js";

export default {
  components: { ConTitle },
  name: "securityAdd",
  data() {
    return {
      topTitle: {
        type: "子账号",
        text: "添加子账号",
        msg: "展示——————————————————————",
      },
      dialogVisible: false,
      securList: [],
      ruleForm: {
        tag: "",
        authority: '',
        online:''
      }, //需要提交的表单项
      rules: {
        tag: [
          { required: true, message: "请输入测量名称", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
        ],
        authority: [
          { required: true, message: "请输入测量单位", trigger: "blur" },
        ]
      }, //需要验证的表单项
      options: [
        //在线状态下拉列表选项
        { value: true, label: "使用中" },
        { value: false, label: "未使用" },
      ],
    };
  },
  methods: {
    getsecList() {
      $secList(this.ruleForm).then((res) => {
        // console.log(res);
        this.groupList = res.data.data;
        this.total = res.data.total;
      });
    },
    handleOK() {
      console.log("弹窗需要关闭，添加一条记录");
      //2.调用添加接口
      this.dialogVisible = false;
      $secAdd({ name: this.ruleForm.tag, type: this.ruleForm.authority, username :''}).then((res) => {
        console.log(res);
        if (res.data.msg == "success") {
          //成功添加
          this.getsecList();
        }
      });
    },
  }
};
</script>

<style lang='scss' scoped>
.box-card {
  margin: 10px;
}
.input_w {
  width: 200px;
}
.btn_left {
  margin-left: 60px;
}
</style>